<template>
  <WsmTable
    ref="table"
    load-url="/dbms-server/base/dbtable/page"
    :change-load="true"
    :offset-height="80"
    v-model="queryFormType"
  >
    <template #title>{{ t('dbms.design.tableDesign.title') }}</template>
    <template #button="{ row }">
      <el-button type="primary" v-hasPermi="'add'" @click="addForm.show()">{{
        t('common.add')
      }}</el-button>
      <template v-if="row">
        <el-button v-hasPermi="'update'" @click="update(row.id)" type="primary">{{
          t('common.update')
        }}</el-button>
        <el-button v-hasPermi="'delete'" @click="del(row.id)" type="danger">{{
          t('common.delete')
        }}</el-button>
      </template>
    </template>
    <template #column>
      <el-table-column
        prop="tabVersion"
        :label="t('dbms.design.tableDesign.tabVersion')"
        width="180"
      />
      <el-table-column prop="name" :label="t('dbms.design.tableDesign.name')" width="180" />
      <el-table-column
        prop="serverName"
        :label="t('dbms.design.tableDesign.serverName')"
        width="180"
      />
      <el-table-column prop="tabComment" :label="t('dbms.design.tableDesign.tabComment')" />
    </template>
  </WsmTable>
  <WsmForm
    ref="addForm"
    v-model="addData"
    submit-url="/dbms-server/base/dbtable/add"
    label-width="100px"
    width="90%"
    :init-data="initData"
    :title="t('dbms.design.tableDesign.addTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="name" :label="t('dbms.design.tableDesign.name')">
            <el-input
              v-model="form.name"
              @change="talbeNameChange(addForm)"
              :placeholder="t('dbms.design.tableDesign.name')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="tabComment" :label="t('dbms.design.tableDesign.tabComment')">
            <el-input
              v-model="form.tabComment"
              :placeholder="t('dbms.design.tableDesign.tabComment')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="columns" :label="t('dbms.design.tableDesign.columns')">
            <el-table :data="form.columns" :height="300">
              <el-table-column
                prop="name"
                :label="t('dbms.design.tableDesign.column.name')"
                width="240"
              >
                <template #default="scope">
                  <el-input v-model="scope.row.name" @change="columnNameChange(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="entityName"
                :label="t('dbms.design.tableDesign.column.entityName')"
                width="240"
              />
              <el-table-column
                prop="dbType"
                :label="t('dbms.design.tableDesign.column.dbType')"
                width="260"
              >
                <template #default="scope">
                  <el-select v-model="scope.row.dbType" @change="dbTypeChange(scope.row)">
                    <el-option
                      v-for="item in columns"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="colPrimary"
                :label="t('dbms.design.tableDesign.column.colPrimary')"
                width="120"
              >
                <template #default="scope">
                  <el-radio-group v-model="scope.row.colPrimary">
                    <el-radio-button type="success" label="是" :value="true" />
                    <el-radio-button type="danger" label="否" :value="false" />
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column
                prop="colLength"
                :label="t('dbms.design.tableDesign.column.colLength')"
                width="120"
              >
                <template #default="scope">
                  <el-input
                    type="number"
                    min="0"
                    v-model="scope.row.colLength"
                    :disabled="!columnLength.includes(scope.row.dbType)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="notNull"
                :label="t('dbms.design.tableDesign.column.notNull')"
                width="120"
              >
                <template #default="scope">
                  <el-radio-group v-model="scope.row.notNull">
                    <el-radio-button type="success" label="是" :value="true" />
                    <el-radio-button type="danger" label="否" :value="false" />
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column
                prop="colComment"
                :label="t('dbms.design.tableDesign.column.colComment')"
              >
                <template #default="scope">
                  <el-input v-model="scope.row.colComment" />
                </template>
              </el-table-column>
              <el-table-column width="100">
                <template #header>
                  <el-button-group>
                    <el-button @click="addColumn(addForm)">{{ t('common.add') }}</el-button>
                  </el-button-group>
                </template>
                <template #default="scope">
                  <el-button @click="removeColumn(scope.$index, addForm)">{{
                    t('common.delete')
                  }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="indexs" :label="t('dbms.design.tableDesign.indexs')">
            <el-table :data="form.indexs" :height="150">
              <el-table-column
                prop="idxName"
                :label="t('dbms.design.tableDesign.index.idxName')"
                width="300"
              >
                <template #default="scope">
                  <el-input v-model="scope.row.idxName" @change="idxNameChange(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="idxColumns"
                :label="t('dbms.design.tableDesign.index.idxColumns')"
              >
                <template #default="scope">
                  <el-input v-model="scope.row.idxColumns" @change="idxColumnsChange(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column width="100">
                <template #header>
                  <el-button-group>
                    <el-button @click="addIndex(addForm)">{{ t('common.add') }}</el-button>
                  </el-button-group>
                </template>
                <template #default="scope">
                  <el-button-group>
                    <el-button @click="removeIndex(scope.$index, addForm)">{{
                      t('common.delete')
                    }}</el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/dbms-server/base/dbtable/getConfig"
    label-width="100px"
    width="90%"
    submit-url="/dbms-server/base/dbtable/update"
    :title="t('dbms.design.tableDesign.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="24">
          <el-form-item
            prop="tabComment"
            :label="t('dbms.design.tableDesign.tabComment') + '(' + form.name + ')'"
          >
            <el-input
              v-model="form.tabComment"
              :placeholder="t('dbms.design.tableDesign.tabComment')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="columns" :label="t('dbms.design.tableDesign.columns')">
            <el-table :data="form.columns" :height="300">
              <el-table-column
                prop="name"
                :label="t('dbms.design.tableDesign.column.name')"
                width="240"
              >
                <template #default="scope">
                  <el-input v-model="scope.row.name" @change="columnNameChange(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="entityName"
                :label="t('dbms.design.tableDesign.column.entityName')"
                width="240"
              />
              <el-table-column
                prop="dbType"
                :label="t('dbms.design.tableDesign.column.dbType')"
                width="260"
              >
                <template #default="scope">
                  <el-select v-model="scope.row.dbType" @change="dbTypeChange(scope.row)">
                    <el-option
                      v-for="item in columns"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="colPrimary"
                :label="t('dbms.design.tableDesign.column.colPrimary')"
                width="120"
              >
                <template #default="scope">
                  <el-radio-group v-model="scope.row.colPrimary">
                    <el-radio-button type="success" label="是" :value="true" />
                    <el-radio-button type="danger" label="否" :value="false" />
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column
                prop="colLength"
                :label="t('dbms.design.tableDesign.column.colLength')"
                width="120"
              >
                <template #default="scope">
                  <el-input
                    type="number"
                    min="0"
                    v-model="scope.row.colLength"
                    :disabled="!columnLength.includes(scope.row.dbType)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="notNull"
                :label="t('dbms.design.tableDesign.column.notNull')"
                width="120"
              >
                <template #default="scope">
                  <el-radio-group v-model="scope.row.notNull">
                    <el-radio-button type="success" label="是" :value="true" />
                    <el-radio-button type="danger" label="否" :value="false" />
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column
                prop="colComment"
                :label="t('dbms.design.tableDesign.column.colComment')"
              >
                <template #default="scope">
                  <el-input v-model="scope.row.colComment" />
                </template>
              </el-table-column>
              <el-table-column width="100">
                <template #header>
                  <el-button-group>
                    <el-button @click="addColumn(updateForm)">{{ t('common.add') }}</el-button>
                  </el-button-group>
                </template>
                <template #default="scope">
                  <el-button @click="removeColumn(scope.$index, updateForm)">{{
                    t('common.delete')
                  }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="indexs" :label="t('dbms.design.tableDesign.indexs')">
            <el-table :data="form.indexs" :height="150">
              <el-table-column
                prop="idxName"
                :label="t('dbms.design.tableDesign.index.idxName')"
                width="300"
              >
                <template #default="scope">
                  <el-input v-model="scope.row.idxName" @change="idxNameChange(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="idxColumns"
                :label="t('dbms.design.tableDesign.index.idxColumns')"
              >
                <template #default="scope">
                  <el-input v-model="scope.row.idxColumns" @change="idxColumnsChange(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column width="100">
                <template #header>
                  <el-button-group>
                    <el-button @click="addIndex(updateForm)">{{ t('common.add') }}</el-button>
                  </el-button-group>
                </template>
                <template #default="scope">
                  <el-button-group>
                    <el-button @click="removeIndex(scope.$index, updateForm)">{{
                      t('common.delete')
                    }}</el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType } from '@/components/WsmTable/src/types'
import { delApi } from '@/api/dbms/dbtable'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'

const { t } = useI18n()

const appName = defineModel<string>()
//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const initData = {
  serverName: appName.value,
  tabVersion: '0',
  columns: [],
  indexs: []
}
const addData: FormDataType = {
  name: '',
  tabComment: '',
  serverName: '',
  tabVersion: '0',
  columns: [],
  indexs: []
}

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  id: '',
  name: '',
  tabComment: '',
  serverName: '',
  tabVersion: '0',
  columns: [],
  indexs: []
}

//查询定义
const queryFormType: QueryFormType = {
  serverName: {
    value: appName.value,
    clear: false
  }
}

const update = (id: string) => {
  updateForm.value.show({ id })
}

const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi({ id })
    if (rs.success) {
      table.value.load(1)
    }
  })
}

//能设置长度的类型
const columnLength = ['NCHAR', 'NVARCHAR', 'CHAR', 'VARCHAR']

const columns = [
  {
    name: '定长字符(NCHAR)',
    value: 'NCHAR'
  },
  {
    name: '变长字符(NVARCHAR)',
    value: 'NVARCHAR'
  },
  {
    name: '8位长度整数(TINYINT)',
    value: 'TINYINT'
  },
  {
    name: '16位长度整数(SMALLINT)',
    value: 'SMALLINT'
  },
  {
    name: '32位长度整数(INT)',
    value: 'INT'
  },
  {
    name: '64位长度整数(LONG)',
    value: 'LONG'
  },
  {
    name: '变长二进制(VARBINARY)',
    value: 'VARBINARY'
  },
  {
    name: '定长二进制(BINARY)',
    value: 'BINARY'
  },
  {
    name: '定长字符(CHAR)',
    value: 'CHAR'
  },
  {
    name: '变长字符(VARCHAR)',
    value: 'VARCHAR'
  },
  {
    name: '精确精度浮点数(DECIMAL)',
    value: 'DECIMAL'
  },
  {
    name: '单精度浮点数(FLOAT)',
    value: 'FLOAT'
  },
  {
    name: '双精度浮点数(DOUBLE)',
    value: 'DOUBLE'
  },
  {
    name: '布尔类型(BOOLEAN)',
    value: 'BOOLEAN'
  },
  {
    name: '精确到日(DATE)',
    value: 'DATE'
  },
  {
    name: '24小时时间(TIME)',
    value: 'TIME'
  },
  {
    name: '精确到毫秒(DATETIME)',
    value: 'DATETIME'
  },
  {
    name: '大型二进制(BLOB)',
    value: 'BLOB'
  },
  {
    name: '大文本(TEXT)',
    value: 'TEXT'
  },
  {
    name: '大文本(NTEXT)',
    value: 'NTEXT'
  }
]

const dbTypeChange = (row) => {
  if (columnLength.includes(row.dbType)) {
    if (row.colLength == 0) {
      row.colLength = 50
    }
  } else {
    row.colLength = 0
  }
}

const addColumn = (form) => {
  const fromData = form.getFormData()
  fromData.columns.push({
    name: '',
    entityName: '',
    dbType: 'VARCHAR',
    colPrimary: false,
    colLength: 50,
    notNull: false,
    colComment: ''
  })
}
const removeColumn = (index, form) => {
  const fromData = form.getFormData()
  fromData.columns.splice(index, 1)
}

const columnNameChange = (row) => {
  const name = row.name
  let entityName = ''
  if (name) {
    const nameSplit = name.split('_')
    nameSplit.forEach((ns) => {
      const _nameSplit = ns.toLowerCase()
      if (entityName.length == 0) {
        entityName += _nameSplit
      } else {
        entityName += _nameSplit.charAt(0).toUpperCase() + _nameSplit.slice(1)
      }
    })
    row.entityName = entityName
  } else {
    row.entityName = ''
  }
  row.name = row.name.toUpperCase()
}

const idxNameChange = (row) => {
  row.idxName = row.idxName.toUpperCase()
}

const idxColumnsChange = (row) => {
  row.idxColumns = row.idxColumns.toUpperCase()
}

const talbeNameChange = (form) => {
  const fromData = form.getFormData()
  fromData.name = fromData.name.toUpperCase()
}

const addIndex = (form) => {
  const fromData = form.getFormData()
  fromData.indexs.push({
    idxName: '',
    idxColumns: ''
  })
}
const removeIndex = (index, form) => {
  const fromData = form.getFormData()
  fromData.indexs.splice(index, 1)
}
const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
